<template>
	<view>
    <!-- 搜索框 -->
    <view class="search_box" @click="toSearch()">
      <my-search></my-search>
    </view>
    <!-- 轮播图区域 -->
      <swiper indicator-dots interval="2000" circular autoplay>
        <swiper-item v-for="item in swiperList" :key="item.goods_id">
          <navigator id="swiper" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
            <image :src="item.image_src"></image>
          </navigator>
        </swiper-item>
      </swiper>
    <!-- 导航区域 -->
    <van-grid column-num="4" :border="false">
      <van-grid-item use-slot v-for="(item,index) in navigateList" :key="index">
        <image :src="item.image_src" @click="navi(index)"></image>
      </van-grid-item>
    </van-grid>
    <!-- 楼层区域 -->
  
      <view v-for="(item,index) in floorList" :key="index" class="floor">
        <!-- 楼层标题 -->
        <image :src="item.floor_title.image_src" class="floor_title"></image>
        <view class="floor_img">
          <view>
            <!-- 楼层左侧图片 -->
            <navigator 
            :url="'/subpkg/goods_list/goods_list?'+item.product_list[0].navigator_url.split('?')[1]">
              <image
              :src="item.product_list[0].image_src" 
              mode="widthFix" 
              class="floor_img_left"
              ></image>
            </navigator>
          </view>
          <!-- 楼层右侧图片 -->
          <view class="floor_img_right">
            <view class="floor_img_right_item" 
            v-for="(item2,index2) in item.product_list"
              :key="index2" 
              v-if="index2!==0" >
              <navigator :url="'/subpkg/goods_list/goods_list?'+item2.navigator_url.split('?')[1]">
                <image
                :src="item2.image_src"
                :style="{width: item2.image_width+'rpx'}" 
                mode="widthFix"></image>
              </navigator>
            </view>
          </view>
        </view>
      </view>
      
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 轮播图数据
				swiperList:[],
        // 导航区域数据
        navigateList:[],
        // 楼层区域数据
        floorList:[]
			};
		},
    methods:{
      // 请求轮播图数据
      async getSwiperList(){
        const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        if(res.meta.status!=200) return uni.$showMsg()
        this.swiperList=res.message
        console.log(this.swiperList)
      },
      // 请求导航区域数据
      async getNavigate(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/catitems')
        if(res.meta.status!=200) return uni.$showMsg()
        this.navigateList=res.message
        console.log(this.navigateList)
      },
      // 导航区域跳转
      navi(i){
        switch(i){
          case 0:
          uni.switchTab({
            url:"/pages/cate/cate"
          })
          break;
        }
      },
      // 请求楼层区域数据
      async getFloor(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/floordata')
        console.log(res)
        if(res.meta.status!=200) return uni.$showMsg()
        this.floorList=res.message
      },
      // 跳转搜索页面
      toSearch(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }
    },
    onLoad() {
      this.getSwiperList()
      this.getNavigate()
      this.getFloor()
    }
	}
</script>

<style >
  #swiper{
    width: 100%;
    height: 330rpx;
  }
  swiper-item image{
    width: 100%;
    height: 100%;
  }
  van-grid-item image{
    width: 128rpx;
    height: 140rpx;
  }
  .floor_title{
    height: 60rpx;
    width: 100%;
  }
  .floor_img{
    display: flex;
  }
  .floor_img_left{
    width: 232rpx;
    margin-left: 8rpx;
  }
  .floor_img_right{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-left: 10rpx;
  }
  .search_box{
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>
